<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showThis">打印this</button>
    <button @click="resetCountLeft">重置Left组件的值为0</button>
    <hr>
    <input @blur="showBtn" ref="input1" type="text" v-if="inputType">
    <button @click="showinput" v-else>展示输入框</button>

    <hr>
    <Left ref="comLeft"></Left>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'

export default {
  components: { Left },
  data() {
    return {
      inputType:false,
      Left
    }
  },
  methods: {
    showThis(){
      console.log(this)
      console.log("Left",this.$refs.comLeft)
      this.$refs.myh1.style.color='red' //改变h1的颜色
    },
    // left组件中的count清零
    resetCountLeft(){
      this.$refs.comLeft.resetCount() // 调用left组件中的resetCount方法
    },
    showinput(){
      // 显示文本框
      this.inputType = true
      
      // 文本框获得焦点
      // $nextTick()可以将组件dom更新完后在执行cb里面的代码，保证操作到最新的元素
      this.$nextTick(()=>{
        this.$refs.input1.focus()
        //console.log(this.$refs.input1)
      })
    },
    showBtn(){
      this.inputType = false
    }
  },
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}

</style>
